<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS3-盒模型</title>
  <style>
    .box{
      width: 300px;  /* 盒子实际宽度是 380px */
      height: 300px; /* 盒子实际高度是 360px */
      background-color: cadetblue;
      padding: 30px;
      border-right: 20px solid red;
      /* 内减模式 固定盒子大小 300*300 */
      box-sizing: border-box;
    }

    .yi{
      width: 1226px;
      height: 460px;
      position: relative;
      border-radius: 10px;
      /* 子元素溢出的部分剪裁 */
      overflow: hidden;
    }

    /* 鼠标悬浮在div，在图片上有个盒子，::after使用伪元素实现 */
    .yi:hover::after{
      content: "";                /* 必须写 content 才会渲染伪元素 */
      width: 100%;                /* 宽度占满 .yi 本身 */
      height: 100%;               /* 高度占满 .yi 本身 */
      /* 
        ⑩ 给伪元素添加 10px 粉边，
        因为 box-sizing: border-box，所以此 border 不会撑大伪元素尺寸
      */
      border: 10px solid lightpink;
      position: absolute;         /* 脱离文档流，定位在 .yi 内部 */
      top: 0;                     /* 距离父容器顶边 0 */
      left: 0;                    /* 距离父容器左边 0 */
      box-sizing: border-box;     /* 保证 border 算入 width/height */
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <div class="yi">
    <img src="../2.css/img/yifan.jpg" />
  </div>
</body>
</html>